<template>
  <el-container>
    <el-header style="background-color: white;color:black" >
      <h1 align="center" >仓库信息</h1>

    </el-header>
      <br />
      <br />
    <!-- 查询条件-->
    <el-form :inline="true" :model="queryForm" class="demo-form-inline">
  <!--  <el-form-item label="仓库编号">
        <el-input v-model="queryForm.storageId" placeholder="仓库编号"></el-input>
      </el-form-item> -->
      <el-form-item label="仓库类型">
        <el-input v-model="queryForm.storageType" placeholder="仓库类型(武器,食品)"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="loadData()">查询</el-button>
      </el-form-item>
    </el-form>



    <el-main>

  <el-button type="primary" @click="addStorage()">新增仓库</el-button>

            <el-button  type="primary" @click="exportExcel"
                  >一键导出excel</el-button>
        <!-- 表格插件 data当前页集合-->
        <el-table :data="list" style="120%" id="out-table" :row-class-name="rowClassName">
          <!--列组件  prop对应当前页集合的对象属性 -->
          <el-table-column prop="id" label="编号" width="50"></el-table-column>
          <el-table-column prop="storageId" label="编号" v-if="false" width="50"></el-table-column>
          <el-table-column prop="storageAddr" label="创库地址" width="120"></el-table-column>
          <el-table-column prop="storageSize" label="创库大小(m²)" width="120"></el-table-column>
          <el-table-column prop="storageType" label="仓库类型" width="120"></el-table-column>
          <el-table-column prop="storageRemark" label="仓库备注" width="120"></el-table-column>
          <el-table-column label="" width="200">
            <!-- solt-scope插槽 用来获取循环的迭代变量-->
            <template slot-scope="scope">
               <el-button type="danger" size="mini" @click="update(scope.row,scope.$index)">修改</el-button>
               <el-button type="danger" size="mini" @click="deleted(scope.row,scope.$index)">删除</el-button>
             </template>
          </el-table-column>
        </el-table>
              <!-- 引入elementui的分页组件，前端实现的分页 -->

                 <el-pagination
                   background
                   layout="prev, pager, next"
                   :total="total"
                   @size-change="select"
                   @current-change="selectPage"
                   :current-page="queryForm.page"
                   :page-size="queryForm.row">
                 </el-pagination>


                 <!-- 提示框-->
                 <el-dialog :title="title" :visible.sync="isShow" width="60%">
                    <el-form ref="updateForm"  :model="updateForm" :rules="rule" label-width="115px">
                      <el-form-item label="仓库地址" prop="storageAddr">
                       <input type="hidden" v-model="updateForm.storageId"/>
                       <el-input v-model="updateForm.storageAddr"></el-input>
                      </el-form-item>

                      <el-form-item label="仓库大小(m²)" prop="storageSize">
                       <el-input  v-model="updateForm.storageSize"></el-input>
                      </el-form-item>
                      <el-form-item label="仓库类型">
                       <el-input  v-model="updateForm.storageType" :disabled="isTrue"></el-input>
                      </el-form-item>
                      <el-form-item label="备注">
                       <el-input v-model="updateForm.storageRemark"></el-input>
                      </el-form-item>

                    </el-form>
                    <span slot="footer" class="dialog-footer">
                      <el-button type="warning" @click="cancel()">取 消</el-button>
                      <el-button type="primary" @click="submit('updateForm')">确 定</el-button>
                    </span>


                 </el-dialog>
    </el-main>
  </el-container>
</template>

<script>

  import FileSaver from "file-saver";
  import XLSX from "xlsx";


  export default{
      name:"storage",
      data(){
         var validateSize = (rule, value, callback) => {
              if (/^(0|[1-9][0-9]*)$/.test(value) == false) {
                callback(new Error("请输入正确的占地面积"));
              } else {
                callback();
              }
            };

        return{
          list:[],//当前页集合
          goods:[],//商品集合
          totalPage:0,//总页数
          total:0,//总条数
          isShow:false,
          title:"修改",
          isTrue:true,
          queryForm:{
            page:1,
            row:4,
            storageId:"",
            storageType:""
          },
          updateForm:{
           storageId:"",
           storageAddr:"",
           storageSize:"",
           storageType:"",
           storageRemark:"",
          },
          rule:{
            storageAddr:[
              { required: true, message: '请输入仓库名称', trigger: 'blur' },
              { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
              ],
              storageSize:[
                { required: true, message: "请输入占地面积", trigger: "blur" },
                { validator: validateSize, trigger: "blur" }

              ]
          }
        }
      },
      methods:{
        loadData(){//加载数据
          var self=this;
          var http=this.$http.get("/user/storage",{params:this.queryForm});
          http.then(function(rs){
              if(rs.data.data){
               self.list=rs.data.data.list;
               self.total=rs.data.data.total;
               self.totalPage=rs.data.data.totalPage;
              }else{
                self.$message(rs.data.info)
                self.list=[];
                self.total=0;
              }
          })
          },
          rowClassName({row, rowIndex}) {
              //把每一行的索引加一放进row.id
              row.id = rowIndex+1;
          },
      select(row){
         this.queryForm.row=row;
         this.loadData();
       },
       selectPage(page){
         this.queryForm.page=page;
         this.loadData();
       },

       update(row,index) {
         this.isShow=true;
         this.isTrue=true;
         //数据回显 去除双向绑定的效果；
         this.updateForm=JSON.parse(JSON.stringify(row));
         this.title="修改";
       },
       deleted(row,index){
        var self=this;
         this.updateForm=JSON.parse(JSON.stringify(row));
        var http=this.$http.get("/user/deleteStorage",{params:this.updateForm});
        http.then(function(rs){
            if(rs.data.success){
              console.log(rs.data.info);
              self.$message(rs.data.info);
              self.loadData();
            }
        })
       },
       cancel(){
         this.isShow=false;
       },
       submit(updateForm){
          var self=this;
          if(this.title=="修改"){
              this.$refs[updateForm].validate((valid) => {
                        if (valid) {
                         var http=this.$http.get("/user/updateStorage",{params:this.updateForm});
                         http.then(function(rs){
                             if(rs.data.success){
                               console.log(rs.data.info);
                               self.$message(rs.data.info)
                               self.isShow=false;
                               self.loadData();
                             }else{
                               self.$message(rs.data.info)
                             }
                         })
                        } else {
                          console.log('error submit!!');
                          return false;
                        }
                      });
          }else{
            //添加逻辑
            var http=this.$http.get("/user/addStorage",{params:this.updateForm});
            http.then(function(rs){
                if(rs.data.success){
                  console.log(rs.data.info);
                  self.$message(rs.data.info)
                  self.isShow=false;
                  self.loadData();
                }
                else{
                  self.$message(rs.data.info)
                }
            })
          }
       },
       addStorage(){
         this.updateForm={};
         this.isTrue=false;
        this.isShow=true;
        this.title="新增仓库";
       },
       exportExcel(){

           var xlsxParam = { raw: true };
                /* 从表生成工作簿对象 */
                var wb = XLSX.utils.table_to_book(
                  document.querySelector("#out-table"),
                  xlsxParam
                );
                /* 获取二进制字符串作为输出 */
                var wbout = XLSX.write(wb, {
                  bookType: "xlsx",
                  bookSST: true,
                  type: "array",
                });
                try {
                  FileSaver.saveAs(
                    //Blob 对象表示一个不可变、原始数据的类文件对象。
                    //Blob 表示的不一定是JavaScript原生格式的数据。
                    //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
                    //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
                    new Blob([wbout], { type: "application/octet-stream" }),
                    //设置导出文件名称
                    "sheetjs.xlsx"
                  );
                } catch (e) {
                  if (typeof console !== "undefined") console.log(e, wbout);
                }
                return wbout;
              },
      },
      mounted() {
        this.loadData();
      }
   }

  </script>

<style>
</style>
